<template>
  <!-- 最顶层  detail-content  开始  -->
  <div class="detail-content">
    <div class="detail uzai-wrapper u-skeleton" id="wrapper" v-show="showA">
      <!-- 头部 开始  -->
      <div class="header">
        <!-- 头部-默认显示 -->
        <div class="before" :style="{ opacity: 1 - afterHeaderOpacity, zIndex: beforeHeaderzIndex }">
          <div class="back">
            <u-icon class="icon" name="arrow-left" color="#fff" size="28" @tap="back" v-if="showBack"></u-icon>
          </div>
          <div class="middle"></div>
          <div class="icon-btn">{{ProductInfo.hits}}</div>
        </div>
        <!-- 头部-滚动渐变显示 -->
        <div class="after" :style="{ opacity: afterHeaderOpacity, zIndex: afterHeaderzIndex }">
          <div class="back">
            <!--u-icon class="icon" name="arrow-left" color="#333" size="28" @tap="back" v-if="showBack"></u-icon-->
          </div>
          <div class="middle">
            <div v-for="(anchor,index) in anchorlist" :class="[selectAnchor==index ?'on':'']" :key="index" @tap="toAnchor(index)">{{anchor.name}}</div>
          </div>
          <div class="icon-btn">{{ProductInfo.hits}}</div>
        </div>
      </div>
      <!-- 头部 结束 -->

      <!-- 首页图片 开始 -->
      <div class="wrapper-scroll u-skeleton-rect" id="wrapper-scroll">
        <nav class="head-bg swiper-container-headbg">
          <div class="item-detail-img-small" @mouseover="imgIndex = index" v-for="(item, index) in ProductImgs" :key="index">
            <img :src="item.image" />
          </div>
        </nav>
        <div class="price-te-jia" style="">
          <svg class="icon svg-icon " aria-hidden="true" style="width:70rpx;height:90rpx;">
            <use xlink:href="#icon-bianzu"></use>
          </svg>
        </div>
        <span class="price-tip-txt" v-if="ProductInfo.Labbel && ProductInfo.Labbel.indexOf(',1,') > -1">
          热卖
        </span>
      </div>
      <!-- 首页图片 结束 -->

      <!-- 详情 开始 -->
      <div class="main">
        <div class="scroll-head" id="scroll-head">
          <!-- 一、线路名字 -->
          <section class="com-box detail-type " style="padding-top: 25rpx; padding-bottom: 12rpx;">
            <div class="list-con">
              <span class="con-sub u-skeleton-rect" style="width: 500rpx;">{{ProductInfo.Sub}}</span>
              <span class="left" style="margin-left: 8rpx;" v-if="ProductInfo.LabbelText">
                <span class="post fix" v-for="(labbelText, index) in ProductInfo.LabbelText.split(',')" v-show="labbelText != ''" :key="index" >{{labbelText}}</span>
              </span>
            </div>

            <div class="list-con u-skeleton-fillet" style="margin-top: 6rpx;">
              <!--svg class="icon svg-icon u-skeleton-fillet" aria-hidden="true" style="width:60rpx;height:60rpx;line-height:65rpx;margin-left:6rpx;margin-right:12rpx;margin-top:-2rpx;">
                    <use xlink:href="#icon-jingdian3"></use>
                </svg>
                <svg class="icon svg-icon" aria-hidden="true" style="position:relative;top:4px;width:38rpx;height:38rpx;line-height:38rpx;margin-right:4rpx;margin-top:0rpx;" v-show="false">
                    <use xlink:href="#icon-huoqing-"></use>
                </svg-->
              <p class="con-text" id="wxData-title">
                {{ProductInfo.Number}}<i class="mouhao" style="padding: 0 4rpx">:</i>{{ProductInfo.ProductName}}
              </p>
            </div>
          </section>

          <!-- 二、行程亮点 开始-->
          <section class="com-box schedule">
            <div class="list-con u-skeleton-fillet">
              <a href="javascript:void(0)" class="com-box buyinfo-btn">
                <svg class="icon svg-icon" aria-hidden="true" style="width: 40rpx; height: 40rpx; margin-right: 10rpx; margin-top: -4rpx;">
                  <use xlink:href="#icon-luntai"></use>
                </svg>
                <label class="title">行程亮点</label>
              </a>
              <div class="wrap-box-two" id="summary" v-show="ProductInfo.Summary!=''">
                <div class="trip-ls none " v-html="ProductInfo.Summary" id="wxData-desc"></div>
              </div>
            </div>
          </section>
          <!-- 二、行程亮点 开始 -->

          <!-- 三、日期价格 -->
          <section class="com-box schedule" v-for="(schepost, key) in ProductTourDates" :key="key" >
            <div class="list-con">
              <div id="schedule" class="com-box buyinfo-btn " @click="showPriceMore" :data-key="key"
                :data-schepostid="schepost.id">
                <svg class="icon svg-icon" aria-hidden="true"
                  style="width: 40rpx; height: 40rpx; margin-right: 10rpx; margin-top: -10rpx;">
                  <use xlink:href="#icon-lvyoujianzhumingshenggujitourism-fanchuanjiudian"></use>
                </svg>
                <label class="title">日期价格<label style="color: orangered;">（{{schepost.text}}）</label></label>
                <label class="more">
                  <label
                    style="margin-right:4px; font-size: 12px; font-weight: 700;">{{textPriceMore == key ? "收起" : "显示更多"}}</label>
                  <i class="icon iconfont"
                    :class="textPriceMore == key ? 'icon-fangxiangyuan-xiangshang' : 'icon-fangxiangyuan-xiangxia'"
                    style="font-size: 16px; color: #28bf7b;"></i>
                </label>
              </div>
              <table st-table="ProductTourDates" width="90%" class="table table-striped" cellspacing="0">
                <thead>
                  <tr>
                    <th class="spec">出团日期</th>
                    <th>班期</th>
                    <th align="right">价格</th>
                    <th v-show="ProductInfo.isVip">同行</th>
                    <th v-show="ProductInfo.isVip">会员</th>
                    <th>机位</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(rows, index) in schepost.list" :key="index" >
                    <td class="spec">{{rows.tourDate}}</td>
                    <td>{{rows.weekName}}</td>
                    <td><span class="red">{{rows.price}}</span></td>
                    <td v-show="ProductInfo.isVip">
                      <span class="red ng-binding" v-if="rows.priceVip > 0">-{{ rows.priceVip }}</span>
                      <span class="red ng-binding" v-else>0</span>
                    </td>
                    <td v-show="ProductInfo.isVip">
                      <span class="red ng-binding" v-if="rows.priceRoom > 0">-{{ rows.priceRoom }}</span>
                      <span class="red ng-binding" v-else>0</span>
                    </td>
                    <td><span class="ng-binding">{{rows.seat?rows.seat:"现询"}}</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </section>

          <!-- 四、收客须知 开始 -->
          <section class="com-box schedule" v-show="ProductInfo.Instructions != '' && ProductInfo.isVip"
            style="background-color: #f7fffb;">
            <div class="list-con">
              <a href="javascript:void(0)" class="com-box buyinfo-btn">
                <svg class="icon svg-icon" aria-hidden="true"
                  style="width: 56rpx; height: 50rpx; margin-right: 2rpx; margin-top: -6rpx;">
                  <use xlink:href="#icon-zhusu"></use>
                </svg>
                <label class="title" style="color:orangered;"> 收客须知（直客不显示）</label>
              </a>
              <div class="wrap-box-two" id="summary">
                <div class="trip-ls none " v-html="ProductInfo.Instructions" id="wxData-desc"></div>
              </div>
            </div>
          </section>
          <!-- 四、收客须知 开始 -->
        </div>

        <!-- 行程介绍 开始 -->
        <div class="trip periphery">
          <section v-for="(JouneryGroupInfo, index) in JouneryGroups" :key="index" :class="index == 0 ? 'wrap-box':'wrap-box hide'"
            find-trip-center>
            <!-- 五、详细行程 开始 -->
            <div class="com-box" id="jounery-group-info">
              <div class="list-con">
                <a href="javascript:void(0)" class="com-box buyinfo-btn">
                  <label class="title">
                    <svg class="icon svg-icon" aria-hidden="true"
                      style="width: 40rpx; height: 40rpx; margin-right: 10rpx; margin-top: 6rpx;">
                      <use xlink:href="#icon-jingdian1"></use>
                    </svg>
                    行程线路
                  </label>
                  <label class="more" style="top:36rpx">
                    <label style="margin-right:8rpx;font-size:24rpx;color:#ddd;">点击可显示详细行程</label>
                  </label>
                </a>
              </div>
              <div class="wrap-box-two days-info on">
                <!-- 详细行程 -->
                <div class="J-router-traveldetail ">
                  <div class="traveldetail">
                    <!-- 列表开始 -->
                    <div class="travels" id="t-wrapper">
                      <div class="" id="t-scroller">
                        <section class="tsection" v-for="(JouneryInfo, k ) in JouneryDayInfo" :key="k" >
                          <!-- 旅游内容开始 -->
                          <div class="travelistone">
                            <div class="traveltop" @click="showInfo" :data-key="k">
                              <div class="travel-left" style="">
                                <span
                                  class="ellipse"><i>{{JouneryInfo.Days > 9 ? JouneryInfo.Days : '0'+ JouneryInfo.Days}}</i></span>
                                <span class="word">DAY</span>
                              </div>
                              <div class="travel-right">
                                <!-- 第几天开始 -->
                                <div class="daytitle" v-show="index != -1">
                                  <!--i class="iconfont icon-address fl address" style="font-size: 38rpx; height: 38rpx; line-height: 38rpx; margin-top: 10rpx;"></i -->
                                  <div class="place">
                                    <div class="placecontent">
                                      <span class="startp" v-for="(JouneryProductTravelType, indexType) in JouneryInfo.ProductTravelTypes" :key="indexType" >
                                        <i :class="'iconfont icon-vehicle-' + JouneryProductTravelType.Type" v-show="indexType > 0"></i>
                                        <span>{{JouneryProductTravelType.TreeName}}</span>
                                      </span>
                                    </div>
                                    <span class="arrow">
                                      <!--<label v-if="k == 0" class="" style="color: #28bf7b; font-size: 12px; font-weight: 700; margin-right:4px; ">{{travelActive == k ? "收起" : "详细行程"}}</label-->
                                      <i class="icon iconfont"
                                        :class="travelActive == k ? 'icon-fangxiangyuan-xiangshang' : 'icon-fangxiangyuan-xiangxia'"
                                        style="font-size: 16px; color: #28bf7b;"></i>
                                    </span>
                                  </div>
                                </div>
                                <!-- 第几天结束 -->

                                <div class="dinner" style="margin-top:8rpx;padding-right:0;">
                                  <!--i class="iconfont icon-daohangxianlu fl" style="float:left; display: inline-block"></i-->
                                  <div class="breakcon" style="padding-right:0;">
                                    <span class="breakfast">景点:</span>
                                    <span v-for="(divspot, indexVs) in JouneryInfo.divspots" :key="indexVs" >
                                      <i class="iconfont icon-dian"
                                        style="background:#888; font-size: 16px; -webkit-background-clip:text;-webkit-text-fill-color:transparent; "
                                        v-show="indexVs > 0"></i>
                                      <span>{{divspot.name}}</span>
                                    </span>
                                  </div>
                                </div>

                                <div class="dinner">
                                  <!--i class="iconfont icon-meal fl"></i-->
                                  <div class="breakcon" v-if="JouneryInfo.Lunch===''">
                                    <span class="breakfast">用餐:</span>自理<i class="iconfont icon-hotel fl"></i>
                                  </div>
                                  <div class="breakcon" v-if="JouneryInfo.Lunch!=''">
                                    <span class="breakfast">用餐:</span>
                                    <span class="lunch" v-for="(lunch, index) in JouneryInfo.Lunch" :key="index">
                                      {{lunch.Name}}
                                      <i :class="'icon iconfont icon-' + lunch.Type + '-2'" style="font-size: 26rpx; margin-left: 4rpx; "></i>
                                    </span>
                                  </div>
                                  <!--i class="iconfont icon-hotel fl"></i-->
                                  <div class="jiudiancon">
                                    <span class="breakfast">酒店:</span><span>{{JouneryInfo.HotelList}}</span>
                                  </div>
                                </div>

                              </div>
                            </div>

                            <div class="travelcontent" v-show="travelActive ==  k">
                              <p class="traveldec" v-html="JouneryInfo.Content"></p>
                              <!-- 轮播开始 -->
                              <div v-show="JouneryInfo.JouneryImgInfo.length>0" style="padding: 0 5px;">
                                <div class="swiper-slide" v-for="(ImgInfo, index) in JouneryInfo.JouneryImgInfo" :key="index">
                                  <img :src="ImgInfo.ImgUrl" class="slideimg" onerror="onerror=null;src='about:blank'">
                                  <p>{{ImgInfo.TreeName}}</p>
                                </div>
                              </div>
                              <!-- 轮播结束 -->
                            </div>
                          </div>
                          <!-- 旅游内容结束 -->
                        </section>
                      </div>
                    </div>
                    <!-- 列表结束 -->
                  </div>
                </div>
                <!-- 详细行程 -->
              </div>
            </div>
            <!-- 五、详细行程 结束 -->

            <div class="info-box" style="">
              <a href="javascript:void(0)" class="info-box-title">
                <label class="title">产品信息</label>
              </a>
            </div>

            <!-- 五、费用包含 -->
            <div class="info_box_o">
              <div class="info-box-head">
                <div class="info_f_squre_o">
                  <label class=title tl>
                    <svg class="icon svg-icon" aria-hidden="true"
                      style="width: 35rpx; height: 35rpx; margin-top: 13rpx; margin-left: 10rpx; margin-right: 5rpx;">
                      <use xlink:href="#icon-jine"></use>
                    </svg>
                    <span class="message">费用包含</span>
                  </label>
                </div>
                <div class="info_b_squre">
                  <p class="b_message">FEI YONG BAO HAN</p>
                </div>
              </div>
              <div class="infox_p_box">
                <p class="info_paragraph" v-show="JouneryGroupInfo.CostInclude!=''"
                  v-html="JouneryGroupInfo.CostInclude"> </p>
              </div>
            </div>

            <!--六、费用不含-->
            <div class="info_box_o">
              <div class="info-box-head">
                <div class="info_f_squre_o">
                  <label class=title tl>
                    <svg class="icon svg-icon" aria-hidden="true"
                      style="width: 35rpx; height: 35rpx; margin-top: 13rpx; margin-left: 10rpx; margin-right: 5rpx;">
                      <use xlink:href="#icon-jine"></use>
                    </svg>
                    <span class="message">费用不含</span>
                  </label>
                </div>
                <div class="info_b_squre">
                  <p class="b_message">FEI YONG BU HAN</p>
                </div>
              </div>
              <div class="infox_p_box">
                <p class="info_paragraph" v-show="JouneryGroupInfo.CostNotInclude!=''"
                  v-html="JouneryGroupInfo.CostNotInclude"> </p>
              </div>
            </div>

            <!-- 七、注意事项-->
            <div class="info_box_o">
              <div class="info-box-head">
                <div class="info_f_squre_o">
                  <label class=title tl>
                    <svg class="icon svg-icon" aria-hidden="true"
                      style="width: 38rpx; height: 38rpx; margin-top: 8rpx; margin-left: 10rpx; margin-right: 3rpx;">
                      <use xlink:href="#icon-shu"></use>
                    </svg>
                    <span class="message">注意事项</span>
                  </label>
                </div>
                <div class="info_b_squre">
                  <p class="b_message">ZHU YI SHI XIANG</p>
                </div>
              </div>
              <div class="infox_p_box">
                <u-read-more color="#28bf7b" @open="open" @close="close" :toggle="toggle" :show-height="showHeight"
                  ref="uReadMore" show-height="600">
                  <!-- u-parse组件在微信小程序渲染慢，支付宝小程序rich-text不支持nodes属性 @click="readMoreClick" -->
                  <!-- #ifdef MP-ALIPAY -->
                  <u-parse :html="JouneryGroupInfo.Notice"></u-parse>
                  <!-- #endif -->
                  <!-- #ifndef MP-ALIPAY -->
                  <rich-text :nodes="JouneryGroupInfo.Notice"></rich-text>
                  <!-- #endif -->
                </u-read-more>
              </div>
            </div>

            <!-- 八、特别提示 -->
            <div class="info_box_g" v-show="!!JouneryGroupInfo.Warm_prompt">
              <div class="info-box-head">
                <div class="info_f_squre_g">
                  <label class=title tl>
                    <svg class="icon svg-icon" aria-hidden="true"
                      style="width: 35rpx; height: 35rpx; margin-top: 13rpx; margin-left: 10rpx; margin-right: 5rpx;">
                      <use xlink:href="#icon-jingdian2"></use>
                    </svg>
                    <span class="message">特别提示</span>
                  </label>
                </div>
                <div class="info_b_squre">
                  <p class="b_message">TE BIE TI SHI</p>
                </div>
              </div>
              <div class="infox_p_box">
                <p class="info_paragraph" v-html="JouneryGroupInfo.Warm_prompt"></p>
              </div>
            </div>

            <!-- 九、购物安排 -->
            <div class="info_box_g" v-show="!!JouneryGroupInfo.Shopping_explanation">
              <div class="info-box-head">
                <div class="info_f_squre_g">
                  <label class=title tl>
                    <svg class="icon svg-icon" aria-hidden="true"
                      style="width: 35rpx; height: 35rpx; margin-top: 13rpx; margin-left: 10rpx; margin-right: 6rpx;">
                      <use xlink:href="#icon-gouwuche"></use>
                    </svg>
                    <span class="message">购物安排</span>
                  </label>
                </div>
                <div class="info_b_squre">
                  <p class="b_message">GOU WU AN PAI</p>
                </div>
              </div>
              <div class="infox_p_box">
                <u-read-more color="#28bf7b" @open="open" @close="close" :toggle="toggle" :show-height="showHeight"
                  ref="uReadMore" show-height="600">
                  <!-- u-parse组件在微信小程序渲染慢，支付宝小程序rich-text不支持nodes属性 @click="readMoreClick" -->
                  <!-- #ifdef MP-ALIPAY -->
                  <u-parse :html="JouneryGroupInfo.Shopping_explanation"></u-parse>
                  <!-- #endif -->
                  <!-- #ifndef MP-ALIPAY -->
                  <rich-text :nodes="JouneryGroupInfo.Shopping_explanation"></rich-text>
                  <!-- #endif -->
                </u-read-more>
              </div>
            </div>

            <!-- 十、自费补充协议 -->
            <div class="info_box_g" v-show="!!JouneryGroupInfo.Selfpaying_explanation">
              <div class="info-box-head">
                <div class="info_f_squre_g">
                  <label class=title tl>
                    <svg class="icon svg-icon" aria-hidden="true"
                      style="width: 35rpx; height: 35rpx; margin-top: 12rpx; margin-left: 10rpx;">
                      <use xlink:href="#icon-shuzhi-"></use>
                    </svg>
                    <span class="message">补充协议</span>
                  </label>
                </div>
                <div class="info_b_squre">
                  <p class="b_message">ZI FEI XIE YI BU CHONG</p>
                </div>
              </div>
              <div class="infox_p_box">
                <u-read-more color="#28bf7b" @open="open" @close="close" :toggle="toggle" :show-height="showHeight"
                  ref="uReadMore" show-height="600">
                  <!-- u-parse组件在微信小程序渲染慢，支付宝小程序rich-text不支持nodes属性 @click="readMoreClick" -->
                  <!-- #ifdef MP-ALIPAY -->
                  <u-parse :html="JouneryGroupInfo.Selfpaying_explanation"></u-parse>
                  <!-- #endif -->
                  <!-- #ifndef MP-ALIPAY -->
                  <rich-text :nodes="JouneryGroupInfo.Selfpaying_explanation"></rich-text>
                  <!-- #endif -->
                </u-read-more>
              </div>
            </div>

            <!-- 十一、接待旅行社信息 -->
            <div class="info_box_g" v-show="!!JouneryGroupInfo.Reception_explanation">
              <div class="info-box-head">
                <div class="info_f_squre_g">
                  <label class=title tl>
                    <svg class="icon svg-icon" aria-hidden="true"
                      style="width: 35rpx; height: 35rpx; margin-top: 10rpx; margin-left: 10rpx; margin-right: 6rpx; ">
                      <use xlink:href="#icon-gouwu"></use>
                    </svg>
                    <span class="message">当地接待社</span>
                  </label>
                </div>

                <div class="info_b_squre">
                  <p class="b_message">DANG DI JIE DAI SHE</p>
                </div>
              </div>
              <div class="infox_p_box">
                <p class="info_paragraph" v-html="JouneryGroupInfo.Reception_explanation"></p>
              </div>
            </div>

            <!-- 十五、报名单位 -->
            <div class="info_box_g" v-show="travelAgency != ''">
              <div class="info-box-head">
                <div class="info_f_squre_g">
                  <label class=title tl>
                    <svg class="icon svg-icon" aria-hidden="true"
                      style="width: 38rpx; height: 38rpx; margin-top: 12rpx; margin-left: 10rpx; margin-right: 4rpx;">
                      <use xlink:href="#icon-huangguan-VIP"></use>
                    </svg>
                    <span class="message">报名单位</span>
                  </label>
                </div>

                <div class="info_b_squre">
                  <p class="b_message">BAO MING DAN WEI</p>
                </div>
              </div>
              <div class="infox_p_box">
                <div class="trip-ls none"><span class="travel-agency-text">公司名称</span>：<span
                    v-html="travelAgency.title"></span></div>
                <div class="trip-ls none"><span class="travel-agency-text">联系人</span>：<span
                    v-html="travelAgency.linkman"></span></div>
                <div class="trip-ls none"><span class="travel-agency-text">联系电话</span>：<a
                    :href="'tel:' + travelAgency.tel"><span v-html="travelAgency.tel"></span></a></div>
              </div>
            </div>

            <!-- 十六、业务咨询 -->
            <div class="info_box_g" v-show="ProductManager != '' && ProductInfo.isVip">
              <div class="info-box-head">
                <div class="info_f_squre_g">
                  <label class=title tl>
                    <svg class="icon svg-icon" aria-hidden="true"
                      style="width:40rpx;height:48rpx;margin-top:8rpx;margin-left:10rpx;">
                      <use xlink:href="#icon-zhusu"></use>
                    </svg>
                    <span class="message">业务咨询</span>
                  </label>
                </div>
                <div class="info_b_squre">
                  <p class="b_message">(直客不显示)</p>
                </div>
              </div>
              <div class="infox_p_box">
                <div class="trip-ls none"><span class="travel-agency-text">收客计调</span>：<span
                    v-html="ProductManager.name"></span></div>
                <div class="trip-ls none"><span class="travel-agency-text">联系电话</span>：<a
                    :href="'tel:' + ProductManager.tel"><span v-html="ProductManager.tel"></span></a></div>
              </div>
            </div>

            <!-- 十七、附件下载 -->
            <div class="info_box_g" v-show="!!Cmsfiles.length>0">
              <div class="info-box-head">
                <div class="info_f_squre_g">
                  <label class=title tl>
                    <svg class="icon svg-icon" aria-hidden="true"
                      style="width: 35rpx; height: 35rpx; margin-top: 12rpx; margin-left: 10rpx;">
                      <use xlink:href="#icon-gouwudai"></use>
                    </svg>
                    <span class="message">文件预览</span>
                  </label>
                </div>
                <div class="info_b_squre">
                  <p class="b_message">BAO MING DAN WEI</p>
                </div>
              </div>
              <div class="infox_p_box">
                <ul>
                  <li v-for="(rows, index) in Cmsfiles" :key="index">
                    <svg class="icon svg-icon" aria-hidden="true" style="width:35rpx; height:35rpx; margin-top:8rpx; ">
                      <use xlink:href="#icon-pdf"></use>
                    </svg>
                    <span class="file-name" @click="perdiv" :data-id="rows.id" style="">{{rows.name}}.{{rows.extend}}</span>
                    <span class="down-load" @click="docDownload" :data-path="rows.realpath" style="">下载</span>
                  </li>
                </ul>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>

    <!--引用组件
    <div v-show="showB" style="padding:200px 50px; height: 100%; background: #eee">
      <u-empty mode="data" icon="http://cdn.udivui.com/udiv/empty/car.png"></u-empty>
    </div>
    
    <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>-->
  </div>
  <!-- 最顶层  detail-content 结束  -->
</template>

<script>
  import common from '@/plugins/common'
  import svg from '@/assets/font/symbol/iconfont.js'
  import { goodsSkuDetail, goodsCruise } from "@/api/goods";

  export default {
    name: "Cruise",
    filters: { trustHtml(value) {} },
    data() {
      return {
        title: 'LIST',
        list: [{
          image: 'https://cdn.udivui.com/udiv/swiper/1.jpg',
          title: '昨夜星辰昨夜风，画楼西畔桂堂东'
        }],

        //控制渐变标题栏的参数
        beforeHeaderzIndex: 11, //层级
        afterHeaderzIndex: 10, //层级
        beforeHeaderOpacity: 1, //不透明度
        afterHeaderOpacity: 0, //不透明度
        //是否显示返回按钮
        // #ifndef MP
        showBack: true,
        // #endif
        anchorlist: [], //导航条锚点
        selectAnchor: 0, //选中锚点
        data: [],
        skeyword: '',
        queryParams: {},
        ProductImgs: [], //图片
        ProductInfo: {}, //基本信息
        ProductTourDates: {}, //价格排期
        JouneryGroups: [], //行程数据
        JouneryDayInfo: {},
        Cmsfiles: {}, //附件下载
        shareParams: {}, //分享数据
        travelAgency: {}, //报名单位
        ProductManager: '', //收客人
        travelShow: {},
        travelActive: -1,
        showA: true, //有数据
        showB: false, //无数据或后台报错
        desc: false, //行程详细描述
        showHeight: 500,
        toggle: true,
        datePriceMore: 0,
        textPriceMore: '-1',
        loading: true // 是否显示骨架屏组件
      }
    },
    created() {
      //uni.setNavigationBarTitle({ title: ' ' })
      this.initData()
    },
    onLoad() {
      //this.initData()
    },
    onReady() {
      this.calcAnchor() //计算锚点高度，页面数据是ajax加载时，请把此行放在数据渲染完成事件中执行以保证高度计算正确
    },
    onPageScroll(e) {
      console.infn("onPageScroll", e);
      //锚点切换
      //this.selectAnchor = e.scrollTop >= this.anchorlist[2].top ? 2 : e.scrollTop >= this.anchorlist[1].top ? 1:0;
      this.selectAnchor = 1
      //导航栏渐变
      let tmpY = 375
      e.scrollTop = e.scrollTop > tmpY ? 375 : e.scrollTop
      this.afterHeaderOpacity = e.scrollTop * (1 / tmpY)
      this.beforeHeaderOpacity = 1 - this.afterHeaderOpacity
      //切换层级
      this.beforeHeaderzIndex = e.scrollTop > 0 ? 10 : 11
      this.afterHeaderzIndex = e.scrollTop > 0 ? 11 : 10
    },
    onShow: function() {
      //console.log('cruise Show')
      this.setdivport('initial-scale=1, minimum-scale=1, maximum-scale=2, user-scalable=yes, width=device-width')
    },
    methods: {
      initData() {
        var that = this
        // that.wxOauth().then(data => {

        // }).catch(err => {
        //   console.info('wxOauth -- catch ---' + err)
        // }).finally(function() {
        //   that.readDetail()
        // })

        that.readDetail()
      },
      /**
       * 从地址栏获取id, 如果有就读取
       */
      readDetail() {
        let me = this
        let params = {}
        let member = this.userInfo

        var id = common.getQueryString('id') || ''
        //测试
        if (process.env.NODE_ENV === 'development' && !id) {
          id = 'f0ca431a74b80c2e0174ba5fb9250096'
        }

        console.info('readDetail@@ cruise ----------- id = ' + id)
        params.id = id
        // params.openid = member.openid || ''
        // params.state = member.state || ''

        goodsCruise(params).then(res => {
          console.log(res)
          let result = []
          if (res.success) {
            result = res.result
            this.onLoadArticle(result)
            this.loading = false
          } else {
            console.log('未查询到数据')
          }
        }).catch(e => {
          console.log('/weixin/cruise 请求错误', e)
        }).finally(function() {
          //common.updateUrl();
          //me.readTravelAgency()
          //me.wxshare()
        })
      },
      /**
       * 更新 model
       */
      onLoadArticle: function(cmsArticle) {
        if (!cmsArticle) {
          this.showA = false
          this.showB = true
          console.log('onLoadArticle  ===== 未查询到数据')
          return false
        } else {
          this.showA = true
          this.showB = false
        }

        var me = this
        //将cmsArticle转换
        //基本信息
        me.ProductInfo = {
          'Number': cmsArticle['number'] || '',
          'Sub': cmsArticle['sub'] || '',
          'ProductName': cmsArticle['title'] || '',
          'ArticleId': cmsArticle['id'] || '',
          'isVip': cmsArticle['isVip'] || '', //false,//
          'isGuestEnd': cmsArticle['isGuestEnd'] || '', //停止收客日
          'hits': '阅读量 ' + me.PrefixZero(cmsArticle['hits'].toString() || '0', 4),
          'priceNote': cmsArticle['price_note'] === '' || cmsArticle['price_note'] === 'null' ? '' : '说明：' + cmsArticle['price_note'],
          'Summary': cmsArticle['summary'] || '', // 二、行程特色
          'Instructions': cmsArticle['instructions'] || '', // 
          'Labbel': cmsArticle['labbel'] || '', // 
          'LabbelText': cmsArticle['labbelText'] || '' // 
          //, 'BenefitedPrice': price_vip
          //, 'Price': price
        }
        console.info("onLoadArticle@@@-------", me.ProductInfo)
        //头部图片----------------------------------------------
        //2020-09-24 又修改为最多显示三张
        var ProductImgs = []
        var photos = cmsArticle['photos']
        if (photos && photos.length) {
          for (var i = 0, itm; i < photos.length; i++) {
            itm = photos[i]
            ProductImgs.push({
              image: this.$config.staticDomainURL + '/' + itm['realpath'],
              title: ''
            })
          }
        }
        //console.info('me.ProductImgs@@@@', ProductImgs)
        me.ProductImgs = ProductImgs

        // 分享标题
        me.shareParams.title = cmsArticle['title']
        me.shareParams.imgUrl = this.$config.staticDomainURL + '/' + cmsArticle['imageHref']
        me.shareParams.desc = '关注我们，及时了解广西出游最新资讯！'
        me.shareParams.link = window.location.href.split('#')[0]

        // 三、排期价格
        me.ProductTourDates = cmsArticle['scheposts']

        //行程分组
        var JouneryGroups = []

        //行程天数
        var JouneryGroupInfo = {
          'Days': cmsArticle['days'],
          'Nights': cmsArticle['nights']
        }

        // 四、详细行程
        var JouneryDetail = []
        var routes = cmsArticle['routes']
        var swiperSlidebox = []
        if (routes && routes.length) {
          var pat_traffic = new RegExp('(?:\\>(\\d+)\\:)?([\\w\\W]+?(?=\\>\\d+\\:)|[\\w\\W]+?$)', 'gi')
          var days = cmsArticle['days'] //routes.length
          for (var i = 0, itm, tt, travelTypes, travelPhotos, divspots; i < days; i++) {
            itm = routes[i]
            //交通, 地点
            travelTypes = []
            // pat_traffic.lastIndex = -1;
            // while((tt = pat_traffic.exec(itm['traffic']))) {
            // 	travelTypes.push({
            // 		'Type': tt[1], 'TreeName': tt[2]
            // 	});
            // }

            //乌鲁木齐>1:中转地>1:南宁吴圩
            tt = itm['traffic'].split('>')
            if (tt.length > 1) {
              for (var j = 0, places; j < tt.length; j++) {
                if (j === 0) {
                  places = tt[j]
                  travelTypes.push({
                    'Type': '',
                    'TreeName': places
                  })
                } else {
                  places = tt[j].split(':')
                  travelTypes.push({
                    'Type': places[0],
                    'TreeName': places[1]
                  })
                }
              }
            } else {
              travelTypes.push({
                'Type': '',
                'TreeName': tt[0]
              })
            }

            //图片 'ImgUrl': './cmsPhotoController.do?div&fileid=' + tt[j]['id']
            travelPhotos = []
            tt = itm['photos']
            if (tt && tt.length) {
              for (var j = 0; j < tt.length; j++) {
                travelPhotos.push({ 'ImgUrl': this.$config.staticDomainURL + '/' + tt[j]['realpath'] })
              }
              swiperSlidebox.push('#swiper-wrapper-' + i)
            }

            divspots = []
            tt = itm['divspot']
            if (tt && tt.length > 0) {
              tt = tt.split(' ')
              for (var j = 0; j < tt.length; j++) {
                var name = ''
                if (tt[j] !== 'null' && tt[j] !== '') {
                  name = tt[j]
                }
                divspots.push({ 'name': name })
              }
            } else {
              divspots.push({ 'name': '' })
            }

            //行程线程
            JouneryDetail.push({
              'Days': (1 + i),
              'ProductTravelTypes': travelTypes,
              'Breakfast': itm['breakfast'],
              'HaveLunch': itm['lunch'],
              'Dinner': itm['dinner'],
              'HotelList': itm['stay'],
              'divspots': divspots,
              'Content': itm['detail'],
              'JouneryImgInfo': travelPhotos
            })
          }
          //2020-09-25
          //me.cacheData.swiperWrapper = swiperSlidebox;
        }

        JouneryGroupInfo['JouneryDetail'] = JouneryDetail

        //五、费用包含 六、费用不含
        JouneryGroupInfo['CostInclude'] = cmsArticle['expenseContain']
        JouneryGroupInfo['CostNotInclude'] = cmsArticle['expenseNcontain']
        //七、注意事项
        JouneryGroupInfo['Notice'] = cmsArticle['notice']
        //八、特别提示
        JouneryGroupInfo['Warm_prompt'] = cmsArticle['warmPrompt']
        //九、购物安排
        JouneryGroupInfo['Shopping_explanation'] = cmsArticle['shoppingExplanation']
        //十、自费补充协议
        JouneryGroupInfo['Selfpaying_explanation'] = cmsArticle['selfpayingExplanation']
        //十一、接待旅行社信息
        JouneryGroupInfo['Reception_explanation'] = cmsArticle['receptionExplanation']

        //添加到行程分组
        JouneryGroups.push(JouneryGroupInfo)
        //
        me.JouneryGroups = JouneryGroups

        this.buildJouneryDayInfo()

        //十五、附件下载
        var Cmsfiles = cmsArticle['cmsFiles']
        me.Cmsfiles = Cmsfiles //团期信息

        //十七、收客计调
        var manager = cmsArticle['map']
        me.ProductManager = manager || ''
      },
      /**
       * 生成详细行程
       */
      buildJouneryDayInfo: function() {
        var me = this
        var JouneryGroups = me.JouneryGroups

        //取出文章的行程, 拷贝
        var JouneryDayInfo = [], JouneryInfo, ProductTravelTypes
        var JouneryGroupInfo, JouneryDetail, Detail
        for (var i = 0; i < JouneryGroups.length; i++) {
          JouneryGroupInfo = JouneryGroups[i]
          JouneryDetail = JouneryGroupInfo['JouneryDetail']
          for (var j = 0; j < JouneryDetail.length; j++) {
            Detail = JouneryDetail[j]
            JouneryInfo = {}
            for (var k in Detail) {
              if (/(?:Breakfast|HaveLunch|Dinner)$/.test(k)) {
                continue
              }
              JouneryInfo[k] = Detail[k]
            }
            //用餐
            //JouneryInfo['Lunch'] = '早(' + Detail['Breakfast'] + ') 中(' + Detail['HaveLunch'] + ') 晚(' + Detail['Dinner'] + ')';

            var Lunch = []
            if (Detail['Breakfast'] === '1') {
              Lunch.push({
                'Type': 'right',
                'Name': '早'
              })
            } else {
              Lunch.push({
                'Type': 'close',
                'Name': '早'
              })
            }
            if (Detail['HaveLunch'] === '1') {
              Lunch.push({
                'Type': 'right',
                'Name': '中'
              })
            } else {
              Lunch.push({
                'Type': 'close',
                'Name': '中'
              })
            }
            if (Detail['Dinner'] === '1') {
              Lunch.push({
                'Type': 'right',
                'Name': '晚'
              })
            } else {
              Lunch.push({
                'Type': 'close',
                'Name': '晚'
              })
            }
            JouneryInfo['Lunch'] = Lunch

            JouneryDayInfo.push(JouneryInfo)
          }
          //设计缺陷只支持一个行程
          break
        }

        this.JouneryDayInfo = JouneryDayInfo
      },
      /**
       * 微信分享
       *
       */
      wxshare() {
        //522行
        //console.info(this.shareParams.title)
        if (this.shareParams.title) {
          this.$jwx.share(this.shareParams)
        }
      },
      /**
       * 自定义函数名：PrefixZero
       * @param num： 被操作数
       * @param n： 固定的总位数
       */
      PrefixZero: function(num, n) {
        if (num.length > 4) {
          return '9999+'
        } else {
          return (Array(n).join(0) + num).slice(-n)
        }
      },

      //返回上一页
      back() {
        history.go(-1)
      },

      /**
       * 收客单位
       */
      readTravelAgency: function() {
        var me = this
        //----------------------------------------------
        var share = common.getQueryString('share')
        var param = {}
        var user = this.userInfo
        //测试
        if (process.env.NODE_ENV === 'development' && !share) {
          share = 'f0ca431a79eddbac0179ee99a84d0061'
        }

        param.id = share || user.id || ''
        if (param.id === '') {
          console.info('收客单位--未获取到会员编号。')
          me.travelAgency = ''
          return
        }
        // api.readTravelAgency(param).then(res => {
        //   var result = res.data
        //   var travelAgency = {}
        //   if (result && result.success) {
        //     var data = result.result || {}
        //     var state = data.state || ''
        //     if ('1' === state) {
        //       travelAgency = {
        //         title: data.corpName,
        //         linkman: data.name,
        //         tel: data.tel
        //       }
        //     }
        //   }
        //   if (JSON.stringify(travelAgency) === '{}') {
        //     me.travelAgency = ''
        //   } else {
        //     me.travelAgency = travelAgency
        //   }
        // })
      },

      /**
       * 显示更新多排除期价格信息
       */
      showPriceMore(e) {
        var me = this
        var dataset = e.currentTarget.dataset
        var schepostId = dataset.schepostid
        var key = dataset.key
        var parameters = {}
        parameters.isGuestEnd = me.ProductInfo.isGuestEnd || '3'
        parameters.isVip = me.ProductInfo.isVip
        parameters.articleId = me.ProductInfo.ArticleId
        parameters.schepostId = schepostId
        if (me.datePriceMore === 1) {
          parameters.more = '0'
          me.datePriceMore = 0
          me.textPriceMore = -1
        } else {
          parameters.more = '1'
          me.datePriceMore = 1
          me.textPriceMore = key
        }
        // api.priceMore(parameters).then(res => {
        //   this.ProductTourDates = res.data
        // })
      },

      /**
       * 点击行程详细内容
       * qindl
       * 2021-05-19
       */
      showInfo(e) {
        var k = e.currentTarget.dataset.key
        var me = this
        if (me.travelActive === k) {
          me.travelActive = -1
        } else {
          me.travelActive = k
        }
        setTimeout(() => {

        }, 300)
      },

      showHeightChange(index) {
        this.showHeight = index === 0 ? 100 : index === 1 ? 200 : 400
      },
      toggleChange(index) {
        this.toggle = index === 0 ? true : false
      },
      open() {
        // console.log('open');
      },
      close() {
        // console.log('close');
      },
      readMoreClick() {
        console.log('close')
        this.$refs.uReadMore.toggleReadMore()
      },
      parseLoaded() {
        this.$refs.uReadMore.init()
      },
      //跳转锚点
      toAnchor(index) {
        this.selectAnchor = index
        //uni.pageScrollTo({scrollTop: this.anchorlist[index].top,duration: 200});
      },
      //计算锚点高度
      calcAnchor() {
        this.anchorlist = [
          // {name:'主图',top:0},
          // {name:'评价',top:0},
          // {name:'详情',top:0}
        ]
      },
      //设置界面可缩放
      setdivport(content) {
        const meta = document.querySelector('meta[name=divport]')
        if (!meta) return
        meta.setAttribute('content', content)
      },
      /**
       * 跳转附件下载
       */
      docDownload(e) {
        //https://www.jianshu.com/p/2ff6c09b1da0
        var filepath = e.currentTarget.dataset.path
        api.docDownload(filepath)
      },
      /**
       * 转入pdf的id编号，转到在浏览页面
       */
      perdiv(e) {
        //this.$router.push({ name: 'pdf', query: ''})
        var query = {}
        query.id = e.currentTarget.dataset.id
        let url = '/pages/weixin/pdf/online'
        this.$navTo.togo(url, query)
      }
    },
  }
</script>

<style lang="scss">
  @import '~@/assets/font/symbol/iconfont.css';
  @import '~@/components/cruise/css/detail.css';
  @import '~@/components/cruise/css/detailGreen2.css';

  page {
    background-color: #f8f8f8;
  }

  @keyframes showPopup {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes hidePopup {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  @keyframes showLayer {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(-100%);
    }
  }

  @keyframes hideLayer {
    0% {
      transform: translateY(-100%);
    }

    100% {
      transform: translateY(0);
    }
  }

  .icon {
    font-size: 26rpx;
  }

  .svg-icon {
    width: 50rpx;
    height: 50rpx;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    float: left;
  }

  .status {
    width: 100%;
    height: 0;
    position: fixed;
    z-index: 10;
    top: 0;
    /*  #ifdef  APP-PLUS  */
    height: var(--status-bar-height); //覆盖样式
    /*  #endif  */
    background-color: #f1f1f1;
    transition: opacity 0.05s linear;
  }

  .header {
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 10;
    /*  #ifdef  APP-PLUS  */
    top: var(--status-bar-height);

    /*  #endif  */
    .before,
    .after {
      width: 100%;
      padding: 0 4%;
      height: 100rpx;
      display: flex;
      align-items: center;
      position: fixed;
      top: 0;
      /*  #ifdef  APP-PLUS  */
      top: var(--status-bar-height);
      /*  #endif  */
      transition: opacity 0.05s linear;

      .back {
        width: 125rpx;
        height: 60rpx;
        flex-shrink: 0;

        .icon {
          margin-left: -10%;
          width: 60rpx;
          height: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 42rpx;
        }
      }

      .middle {
        width: 100%;
      }

      .icon-btn {
        width: 180rpx;
        height: 60rpx;
        line-height: 60rpx;
        flex-shrink: 0;
        display: flex;

        .icon {
          &:first-child {
            margin-right: 5rpx;
          }

          width: 60rpx;
          height: 60rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 42rpx;
        }
      }
    }

    .before {
      .back {
        .icon {
          color: #fff;
          background-color: rgba(0, 0, 0, 0.2);
          border-radius: 100%;
        }
      }

      .icon-btn {
        .icon {
          color: #fff;
          background-color: rgba(0, 0, 0, 0.2);
          border-radius: 100%;

        }
      }
    }

    .after {
      background-color: #f1f1f1;

      .back {
        .icon {
          color: #00d370;
        }
      }

      .icon-btn {
        .icon {
          color: #666;
        }
      }

      .middle {
        font-size: 32rpx;
        height: 90rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 7%;

        div {
          /*width: (100vh/3);*/
          padding: 0 3%;
          margin: 0 3%;
          display: flex;
          justify-content: center;
          align-items: center;

          &.on {
            margin-bottom: -4rpx;
            color: #f47952;
            border-bottom: solid 4upx #f47952;
          }
        }
      }
    }
  }

  .info_box_g .infox_p_box {
    min-height: 100rpx;
  }

  .info_box_g .infox_p_box ul {
    min-height: 100rpx;
  }

  .info_box_g .infox_p_box ul li {
    list-style: none;
    position: relative;
  }

  .info_box_g .infox_p_box .file-name {
    color: #007BFF;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-right: 65rpx;
    text-indent: 18rpx;
  }

  .info_box_g .infox_p_box .down-load {
    color: orangered;
    width: 65rpx;
    float: right;
    position: absolute;
    top: 0;
    right: 0;
  }
</style>